<template>
	<view> <!--商品排列模板 三个框为一行 -->
		<view class="moduleContent">
			<view class="shorter" v-for="(item,index) in product" :key="index">
				<image class="mc-image" src="" mode=""></image>
				<view class="productProp">
					<text class="prop1">{{item.name}}</text>
					<view class="prop2">
						<text class="price">￥{{item.price}}</text>
						<shopping-cart class="shoppingCart" :class="cartId==3?'cart-btn':''" :Item="item" :cartId="cartId" color="#e15852"></shopping-cart>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import shoppingCart from '@/components/shoppingCart-Button.vue';
	export default {
		components:{
			shoppingCart,
		},
		name: 'product2',
		props:{//把该组件需要用到的参数抛出去，让其他组件或文件来改变
			//商品列表
			product: {
				type: Array,
				default: ()=>[]
			}
		},
		data() {
			return {
				
			};
		},
		watch:{//用来监听data中的某个值是否有变化
			
		},
		methods:{
			
		},
	}
</script>

<style lang="scss">
	.shoppingCart{
		width: auto;
		height: auto;
		position: absolute;
		bottom: 20upx;
		right: 60upx;
	}
	.cart-btn{
		bottom: 35upx;
	}
	.moduleContent{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 30upx;
		border-radius: 12upx;
		overflow: hidden;
		position: relative;
		z-index: 1;
		.shorter{
			width: 216upx;
			// margin-right: 18upx;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			margin-bottom: 16upx;
			box-shadow: 0 0 28upx 0 rgba(0,0,0,.08);
			border: 2upx solid #eee;
			border-radius: 12upx;
			background: #fff;
		}
		.mc-image{
			position: relative;
			overflow: hidden;
			border-top-right-radius: 12upx;
			border-top-left-radius: 12upx;
			width: 216upx;
			height: 216upx;
		}
		.productProp {
		    position: relative;
		    padding: 0 18upx;
			color: #3285ff;
		}
		.prop1{
			font-size: 14px;
			width: 290upx;;
			max-height: 152upx;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-sizing: content-box;
			box-sizing: content-box;
		}
		.prop2{
			display: flex;
			align-items: center;
			min-height: 66upx;
			width: 100%;
			margin-top: 12upx;
			justify-content: space-between;
		}
		.price{
			font-size: 15px;
			max-width: 264upx;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 10upx;
		}
		.shoppingCart {
		    width: 38upx;
		    height: 34upx;
		    margin-left: auto;
		}
	}
</style>
